<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #tips {
            color: red;
            font-weight: bold;
            display: none;
        }
    </style>
    <script src="js/ajax.js"></script>
</head>
<body>
<h1>用户登录 - ajax 异步实现</h1>
<!--
    默认的请求方式是同步的
-->
<form>
    用户名：<input type="text" id="username" value="zhangsan"/><br/>
    密码：<input type="text" id="password" value="123456"/><br/>
    <input type="button" value="登录" onclick="dengLu()"/>
    <span id="tips">错误的帐号或密码</span>
</form>

<script>
    function dengLu() {
        // 第一：获取 XMLHttpRequest 对象
        var req = getXmlHttp();

        // 第二：初始化HTTP请求参数 - open
        req.open("post", "login-ajax.do", true);

        // 设置表单传输的编码格式，若为 post 传值，则要显示设置
        req.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        // 第三：发送请求
        var user = document.getElementById("username").value;
        var pass = document.getElementById("password").value;
        var param = "uname=" + user + "&upass=" + pass;
        req.send(param);

        // 第四：监听事件 - 判断服务器是否正常响应数据
        req.onreadystatechange = function() {
            // 第五：判断响应的状态
            if(req.readyState==4 && req.status==200) {
                // 第六：获取响应的内容 - success || error
                var r = req.responseText

                // 第七：对响应的结果进行处理
                if(r=="error") {
                   document.getElementById("tips").style.display = "inline" ;
                   return ;
                }

                // 注意：服务响应回来的是 JSON 字符串（JavaScript对象的字符串表示）
                // r = {"username":"zhangsan","password":"123456"}
                // 把数据，存储在浏览器中 - 实现跨页面共享（传递）数据
                localStorage.setItem("user",r)

                location.href = "welcome.html"
            }
        }
    }









</script>
</body>
</html>